<template>
  <div class="register-confirm-phone">
    <div class="phone-wrap">
      <div class="register-phone-number">
        <!--验证码已发送至你的手机号码-->
        <template v-if="isShowPhoneNumber">
          {{ $tc('message.sendCode', 2) }}：
          <span >{{ phoneNumber }}</span>
        </template>
        <!--点击按钮发送短信验证码到您的手机-->
        <template v-else>{{ $tc('message.sendCode') }}</template>
      </div>
      <div class="register-verification-send">
        <!--请输入短信验证码-->
        <div class="register-verification-input">
          <input type="text" v-model="verificationCodeModel" @keyup.enter="checkVerificationCode()" :class="{ 'input-error': verificationCodeErrorText }" :placeholder="$t('message.sendCodeHolder')"/>
        </div>
        <div class="register-verification-btn">
          <v-code-button :status="btnStatus" @click-button="getVerificationCode()"></v-code-button>
        </div>
      </div>
      <!--错误信息-->
      <div class="register-verification-error" v-if="verificationCodeErrorText">
        {{ verificationCodeErrorText }}
      </div>
      <!--下一步-->
      <div class="register-next-step">
        <button type="button" @click="nextStep" class="button">{{ $t('message.next') }}</button>
      </div>
      <!--上一步-->
      <div class="register-previous-step">
        <button type="button" @click="goBack">{{ $t('message.prev') }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import VCodeButton from '@/components/base/VCodeButton'
import { getCookie } from '@/util/util'

export default {
  name: 'RegisterPhone',
  components: {
    VCodeButton
  },
  data () {
    return {
      isShowPhoneNumber: false,
      verificationCodeModel: '',
      verificationCodeStatus: 0,
      btnStatus: 0
    }
  },
  watch: {
    verificationCodeModel () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.checkVerificationCode()
      }, 1000)
    }
  },
  computed: {
    phoneNumber () {
      return this.$route.query.phone
    },
    // 2:验证码不能为空
    // 3:验证码格式错误
    // 4:验证码发送失败，请点击按钮重新发送
    // 5:短信未开启
    // 6:该手机号码错误
    // 7:短信发送量太多。在一分钟内不超过两次
    // 8:验证码错误
    verificationCodeErrorText () {
      switch (this.verificationCodeStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.codeNoEmpty')
        case 3:
          return this.$t('message.codeFomatError')
        case 4:
          return this.$t('message.messageSendFail')
        case 5:
          return this.$t('message.messageNotOpen')
        case 6:
          return this.$t('message.phoneNumberError')
        case 7:
          return this.$t('message.messageSendSoMuch')
        case 8:
          return this.$t('message.codeError')
      }
    }
  },
  activated () {
    this.isShowPhoneNumber = false
  },
  methods: {
    goBack () {
      this.verificationCodeModel = ''
      this.$router.go(-1)
    },
    getVerificationCode () {
      this.btnStatus = 1
      this.$ajax.sendInfoCheck(this.phoneNumber).then((res) => {
        if (res.code === 200 || res.code === 311) {
          this.btnStatus = 2
          if (res.code === 200) {
            this.verificationCodeStatus = 0
            this.isShowPhoneNumber = true
          } else {
            this.verificationCodeStatus = 7
          }
        } else if (res.code === 202) {
          this.verificationCodeStatus = 4
          this.btnStatus = 0
        } else if (res.code === 301) {
          this.verificationCodeStatus = 5
          this.btnStatus = 0
        } else if (res.code === 303 || res.code === 305) {
          this.verificationCodeStatus = 6
          this.btnStatus = 0
        }
      }).catch((err) => {
        console.log(err)
        this.verificationCodeStatus = 4
        this.btnStatus = 0
      })
    },
    checkVerificationCode () {
      let code = this.verificationCodeModel
      if (code === '') {
        this.verificationCodeStatus = 0
      } else if (code.length !== 6) {
        this.verificationCodeStatus = 3
      } else {
        this.verificationCodeStatus = 1
      }
    },
    nextStep () {
      if (this.verificationCodeModel === '') {
        this.verificationCodeStatus = 2
        return
      }
      if (this.verificationCodeStatus === 1) {
        this.$ajax.ValidateInfo(this.phoneNumber, this.verificationCodeModel).then((res) => {
          if (res.code === 200) {
            //  let phoneCode = this.verificationCodeModel
            // window.sessionStorage.setItem('thaiPayMall_registerCode', phoneCode)
            // 注册用户
            // 获取第一步骤的数据  
            // let strUser = window.sessionStorage.getItem('thaiPayMall_registerUser')
            let strUser = getCookie('thaiPayMall_registerUser')
            let registerUser = JSON.parse(strUser)
            // 写入第一步骤数据,验证码
            let data = {
              user_name: registerUser.username,
              user_email: registerUser.email,
              user_pwd: registerUser.password,
              user_mobile: registerUser.phoneNumber,
              sms_code: this.verificationCodeModel,
              r: registerUser.getReferrer
            }
            this.$ajax.register(data).then((res) => {
              if (res.code === 200) {
                this.$router.push({path: '/register/identity'})
              }
            }).catch((err) => {
              this.$store.commit('alert', {
                switch: true
              })
            })
          } else {
            this.verificationCodeStatus = 8
          }
        }).catch((err) => {
          this.$store.commit('alert', {
            switch: true
          })
        })
      }
    }
  }
}
</script>

<style scoped>
  .register-confirm-phone {
    margin-top: 60px;
    padding-bottom: 100px;
  }
  .phone-wrap {
    width: 376px;
    margin: 0 auto;

  }
  .register-phone-number {
    font-size: 14px;
    color: #333333;
  }
  .register-phone-number span {
    color: #FF600A;
  }

  .register-verification-send {
    width: 376px;
    height: 48px;
    margin-top: 24px;
  }

  .register-verification-send > div {
    float: left;
  }

  .register-verification-input {
    height: 48px;
  }

  .register-verification-input > input {
    width: 216px;
    height: 46px;
    border: 1px solid #D7D7D7;
    border-radius: 2px;
    padding: 0 16px;
    outline: none;
  }

  .register-verification-btn {
    width: 110px;
    height: 48px;
    margin-left: 16px;
  }

  .register-verification-error {
    line-height: 16px;
    padding-left: 24px;
    color: #FF600A;
    font-size: 14px;
    margin-top: 12px;
    background: url('../../assets/images/icon_errorTips.png') no-repeat;
  }

  .register-next-step {
    height: 48px;
    margin-top: 50px;
  }

  .register-next-step > button {
    color: #fff;
    background-color: #ff600a;
    border: 0;
  }

  .register-previous-step {
    margin-top: 24px;
    height: 48px;
  }

  .register-previous-step > button, .register-next-step > button {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 2px;
    font-size: 16px;

  }
  .register-previous-step > button{
    background: #fff;
    border: 1px solid #D7D7D7;
    color: #A5A5A5;
  }
</style>
